<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { margin: 0;
            padding: 0
        }

        body {
            /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 */
            background-size: cover;
        }

        .header {
            background: url(images/header.jpg);
            background-size: cover;
            width: 240px;
            height: 240px;
            margin: 0 10px 20px 10px;
        }

        #left { font-size: 17px; color:rgba(243, 243, 242, 0.938); text-align: center;}
        #title {margin-top: 20px; line-height: 20px;}
    </style>

</head>

<body background="images/background.jpg">
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
        L2Dwidget.init({
            "model": {　　　　　　　 //jsonpath控制显示那个小萝莉模型，
                //(切换模型需要改动)
                //				"https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json"
                jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
                "scale": 1
            },
            "display": {
                "position": "left", //看板娘的表现位置
                "width": 75, //小萝莉的宽度
                "height": 150, //小萝莉的高度
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.7,
                "opacityOnHover": 0.2
            }
        });
    </script>
    <script>
        function GetRandomNum(Min, Max) {
             var Range = Max - Min;
             var Rand = Math.random();
             return (Min + Math.round(Rand * Range));
        }

        function setSidebarMarginTop(headerOffset) {
            return $('#sidebar').css({
            'margin-top': headerOffset
            });
        }

        function getHeaderOffset() {
            return $('.header-inner').height() + CONFIG.sidebar.offset;
        }
        window.onload = function() {
            var subtitle = "我翻山越岭，终寻一人等候。W和梦想平等交易，和喧嚣保持距离。W希望你好，希望你顺利，即使小有坎坷，偶遇困顿也能化险为夷。W成熟是给你陌生人看的，逗比是给朋友看的，幼稚是给喜欢的人看的。W不要说了，我不会屈服。W刚刚又没忍住，往宇宙里发送了想你的脑电波。";
            var mytitle = subtitle.split("W");
            var max = mytitle.length - 1;
            var index = GetRandomNum(0, max);
            var text = mytitle[index];
            var a=document.getElementById("title");
            a.innerHTML=text;
            var headOffset = getHeaderOffset();
            setSidebarMarginTop(headOffset);
            //动态subtitle设置
        }
    </script>
    <hr style="border:none; border:1.5px solid black;">
    <div id="right">
        <a href="https://github.com/readpage" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;"src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
    </div>
    <div id="left">
        <div class="header">
            <p>&nbsp;</p>
            <p style="color: white; font-size: 20px;">天气</p>
            <p id="title"></p>
        </div>
        <div>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="tags">标签</a></li>
                <li><a href="categories">分类</a></li>
                <li><a href="guestbook">留言</a></li>
                <li><a href="love">love</a></li>
                <li><a href="about">关于</a></li>
            </ul>
        </div>
    </div>
</body>

</html>